<script>
import { getShowNginxPicUrl } from "@/utils/settings"
import request from "@/utils/request"

export default {
  name: "daiBeiAlert",
  methods: {
    getShowNginxPicUrl,
    open(jumpPaidPage) {
      this.jumpPaidPage = jumpPaidPage
      this.$refs.popup.open()
    },
    goTo() {
      // 跳转到付费页面
      uni.navigateTo({
        url: this.jumpPaidPage,
      })
    },
    // 检查该带背词库是否可用
    async checkAvailable(thesaurusId, jumpPaidPage) {
      try {
        await request({
          url: "thesaurus/checkAvailable",
          data: {
            thesaurusId: thesaurusId,
          },
          showLoading: true,
        })
        return true
      } catch (e) {
        this.open(jumpPaidPage)
        return false
      }
    },
  },
  data() {
    return {
      jumpPaidPage: "",
    }
  },
}
</script>

<template>
  <uni-popup ref="popup" type="center">
    <view class="popup-content">
      <image
        class="poster"
        :src="getShowNginxPicUrl('abef3d81b9be44b0b42a6f72071e910.png')"
        mode="widthFix"
        :show-menu-by-longpress="true"
      ></image>
      <!--      <view class="message">-->
      <!--        <text>该词库仅限</text>-->
      <!--        <text class="primary">考研带背营</text>-->
      <!--        <text>用户学习使用。可点击</text>-->
      <!--        <text class="bold">【立即前往】或扫码添加校务行学长</text>-->
      <!--        <text>了解详情规则并解锁使用权限。</text>-->
      <!--      </view>-->
      <view class="footer-btn">
        <view class="cancel-btn btn" @click="$refs.popup.close()">取消</view>
        <view class="goto-btn btn" @click="goTo">立即前往</view>
      </view>
    </view>
  </uni-popup>
</template>

<style scoped lang="scss">
.popup-content {
  width: 580rpx;
  background: white;
  border-radius: 30rpx;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  > .poster {
    width: 100%;
  }
  //> .message {
  //  font-size: 30rpx;
  //  line-height: 1.5;
  //  padding: 30rpx;
  //  > .primary {
  //    font-size: 32rpx;
  //    color: #fc6119;
  //    margin: 0 10rpx;
  //  }
  //  > .bold {
  //    font-weight: bold;
  //    margin: 0 10rpx;
  //  }
  //}
  > .footer-btn {
    //margin-top: 50rpx;
    display: flex;
    font-size: 30rpx;
    > .btn {
      width: 0;
      flex: 1;
      padding: 26rpx 0;
      text-align: center;
    }
    > .cancel-btn {
      background-color: rgba(240, 240, 240, 0.9);
    }
    > .goto-btn {
      background-color: var(--theme-color);
      color: white;
    }
  }
}
</style>
